<template>
  <el-container class="overflow-hidden">
    <el-header
      height="auto"
      class="left_tree_top"
    >
      <div
        class="flex_lr"
      >
        <div class="biaot">
          页面
        </div>
        <div
          class="left_div"
          v-show="showSearchInput"
        >
          <el-input
            size="mini"
            prefix-icon="el-icon-search"
            placeholder="关键字"
            v-model="tagKeyword"
            clearable
            @clear="clearSearchInput"
            style="width: 100%;"
            @blur="blurSearchInput"
            ref="searchInput"
          />
        </div>
        <div
          class="right_div"
          v-show="!showSearchInput"
        >
          <el-button
            icon="el-icon-search"
            size="medium"
            type="text"
            @click="focusToSearchInput"
          />
          <span v-if="tagKeyword === ''">

            <el-button
              v-if="!selectNode || selectNode.TP == '1'"
              type="text"
              icon="ri-add-line"
              name="增加分组"
              @click="addBq(false)"
              size="medium"
            >
              分组</el-button>

            <el-button
              v-if="selectNode"
              type="text"
              icon="ri-add-line"
              name="增加页面"
              @click="addGroup(false)"
              size="medium"
            >
              页面</el-button>

            <el-tooltip
              class="item"
              content="修改"
              effect="light"
              placement="bottom"
              v-if="selectNode && selectNode.id !== 'ROOT' && selectNode.PAGE_STATE != '1' && selectNode.TS_UN == userInfo.DEPT_ID "
            >
              <el-button
                size="medium"
                type="text"
                icon="el-icon-edit"
                name="修改"
                @click="editTag"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              content="刷新树"
              effect="light"
              placement="bottom"
            >
              <el-button
                type="text"
                icon="el-icon-refresh"
                size="medium"
                @click="refreshTree(1)"
              />
            </el-tooltip>
          </span>
          <el-popover
            placement="bottom-end"
            width="160"
            trigger="hover"
          >
            <el-button
              size="medium"
              type="text"
              icon="el-icon-warning-outline"
              name="图例说明"
              slot="reference"
              class="tuli"
            />
            <div class="tuli_box">
              <div
                class="list_h"
              >
                图标图形--类型：
              </div>
              <ul>
                <li>
                  <BKSvgIcon
                    icon-class="svg-sort-root"
                    class="svg_size"
                  /><em>---</em>分组
                </li>
                <li>
                  <i
                    class="ri-file-list-2-line c-grey"
                  /><em>---</em>页面
                </li>
              </ul>
              <!-- <div
                class="list_h two_h"
              >
                文字颜色--状态：
              </div>
              <ul>
                <li>
                  <span class="box box_black " /><em>---</em>
                  <span style="color: #333;">未发布</span>
                </li>
                <li>
                  <span class="box box_green" /><em>---</em><span style="color: #2bd301;">已发布</span>
                </li>
              </ul> -->
            </div>
          </el-popover>
        </div>
      </div>
    </el-header>
    <el-main>
      <BKTree
        ref="tagTree"
        v-if="tagKeyword === ''"
        :menu-config="menuConfig"
        @menuClick="menuClick"
        @node-click="nodeClick"
        :default-expanded-keys="['ROOT']"
        node-key="id"
        :draggable="tagKeyword === ''"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        @node-drop="nodeDrop"
        lazy
        :load="loadTagNode"
        :props="props"
        :mock="treeData"
        has-line
        key="2"
        class="no_root"
      >
        <div
          class="custom-tree-node flex-1 hidden-menu"
          slot-scope="{ node, data }"
        >
          <span
            class="node-icon f-14"
            v-if="data.id == 'ROOT'"
          >
            <BKSvgIcon
              v-if="data.id == 'ROOT'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />
            <b> {{ node.label }}</b>
          </span>
          <span
            v-else
            class="node-icon f-14"
          >
            <BKSvgIcon
              v-if="data.id == 'ROOT'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />
            <BKSvgIcon
              v-else-if="data.TP == '1'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />

            <!-- <span
              v-else-if="data.TC_IS_LVL == '1'"
              class="content-node sort-icon-node"
            /> -->
            <i
              v-else
              class="ri-file-list-2-line content-node sort-icon-node c-grey"
            />
            <span
              v-if="data.PAGE_STATE != '1'"
              style="color: #333;"
            >{{ node.label }}</span>
            <span
              v-else
              style="color: #2bd301;"
            >{{ node.label }}</span>
          </span>
          <el-popover
            placement="bottom"
            class="menu-btn"
            width="160"
            trigger="hover"
            :append-to-body="false"
            :visible-arrow="false"
            :ref="'menuPopover-' + data.id"
          >
            <template v-for="(menu, i) in menuConfig">
              <div
                v-if="menu.visible(data)"
                :key="i"
                class="more-menu-panel"
              >
                <span
                  :key="i"
                  v-if="menu.isSplitLine"
                  class="more-split-line"
                />
                <span
                  v-else
                  :key="i"
                  class="more-menu-operation"
                  @click="menuClick(menu,data)"
                >
                  <i
                    v-if="menu.icon"
                    :class="menu.icon"
                  />
                  <span>{{ menu.title }}</span>
                </span>
              </div>
            </template>
            <el-button
              slot="reference"
              size="small"
              type="text"
              icon="el-icon-more"
              class="c-grey"
              @mouseenter.native="handleMouseenter('menuPopover-' + data.id,$event)"
            />
          </el-popover>
        </div>
      </BKTree>
      <BKTree
        v-else
        ref="tagTree"
        :menu-config="menuConfig"
        @menuClick="menuClick"
        @node-click="nodeClick"
        default-expand-all
        key="1"
        node-key="id"
        :props="props"
        :mock="treeData"
        :lazy="false"
        has-line
      >
        <div
          class="custom-tree-node flex-1 hidden-menu"
          slot-scope="{ node, data }"
        >
          <span
            class="node-icon f-14"
            v-if="data.id == 'ROOT'"
          >
            <BKSvgIcon
              v-if="data.id == 'ROOT'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />
            <b> {{ node.label }}</b>
          </span>
          <span
            v-else
            class="node-icon f-14"
          >
            <BKSvgIcon
              v-if="data.id == 'ROOT'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />
            <BKSvgIcon
              v-else-if="data.TP == '1'"
              class="svg-icon-node"
              icon-class="svg-sort-root"
            />

            <!-- <span
              v-else-if="data.TC_IS_LVL == '1'"
              class="content-node sort-icon-node"
            /> -->
            <i
              v-else
              class="ri-file-list-2-line content-node sort-icon-node c-grey"
            />
            <span
              v-if="data.PAGE_STATE != '1'"
              style="color: #333;"
            >{{ node.label }}</span>
            <span
              v-else
              style="color: #2bd301;"
            >{{ node.label }}</span>
          </span>
          <el-popover
            placement="bottom"
            class="menu-btn"
            width="160"
            trigger="hover"
            :append-to-body="false"
            :visible-arrow="false"
            :ref="'menuPopover-' + data.id"
          >
            <template v-for="(menu, i) in menuConfig">
              <div
                v-if="menu.visible(data)"
                :key="i"
                class="more-menu-panel"
              >
                <span
                  :key="i"
                  v-if="menu.isSplitLine"
                  class="more-split-line"
                />
                <span
                  v-else
                  :key="i"
                  class="more-menu-operation"
                  @click="menuClick(menu,data)"
                >
                  <i
                    v-if="menu.icon"
                    :class="menu.icon"
                  />
                  <span>{{ menu.title }}</span>
                </span>
              </div>
            </template>
            <el-button
              slot="reference"
              size="small"
              type="text"
              icon="el-icon-more"
              class="c-grey"
              @mouseenter.native="handleMouseenter('menuPopover-' + data.id,$event)"
            />
          </el-popover>
        </div>
      </BKTree>
    </el-main>

    <AddGroup
      ref="addGroup"
      v-if="addGroupVisible"
      :visible="addGroupVisible"
      :is-edit="addGroupIsEdit"
      :form-data="groupformData"
      @refresh="refreshTree(1)"
      @close="(type)=>handleClose('addGroupVisible',type)"
    />
    <AddPage
      ref="addPage"
      v-if="addPageVisible"
      :visible="addPageVisible"
      :is-edit="addPageIsEdit"
      :is-copy="copyPageFlag"
      :form-data="pageformData"
      @refresh="refreshTree(addPageIsEdit ? 2 : undefined)"
      @close="(type)=>handleClose('addPageVisible',type)"
    />
  </el-container>
</template>
<script>
import AddGroup from './add-group'
import AddPage from './add-page'
import { mapState } from 'vuex'
const appId = 'YSJC'
const bzCode = 'YSJC'
export default {
  components: {
    AddGroup, AddPage
  },
  props: {
    openPage: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      isRefresh: false,
      treeData: [],
      tagKeyword: '',
      props: {
        label: 'label',
        children: 'children',
        isLeaf: 'isLeaf'
      },
      menuConfig: [
        { title: '添加同级分组', visible: (data) => data.id !== 'ROOT' && data.TP === '1' && this.tagKeyword === '' },
        { title: '添加同级页面', visible: (data) => data.id !== 'ROOT' && data.TP === '2' && this.tagKeyword === '' },
        { title: '添加下级页面', visible: (data) => this.tagKeyword === '' },
        { title: '编辑', visible: (data) => data.id !== 'ROOT' && data.PAGE_STATE !== '1' && data.TS_UN === this.userInfo.DEPT_ID },
        { title: '删除', visible: (data) => data.id !== 'ROOT' && data.PAGE_STATE !== '1' && data.TS_UN === this.userInfo.DEPT_ID },
        { title: '复制', visible: (data) => data.id !== 'ROOT' && data.TP !== '1' }
        // { title: '', visible: () => true, isSplitLine: true },
        // { title: '发布', visible: (data) => data.id !== 'ROOT' && data.PAGE_STATE !== '1' && data.TS_UN === this.userInfo.DEPT_ID },
        // { title: '取消发布', visible: (data) => data.id !== 'ROOT' && data.PAGE_STATE === '1' && data.TS_UN === this.userInfo.DEPT_ID }
      ],
      tableData: [],
      selectNode: null,
      operateNodeId: '',
      addGroupVisible: false,
      addGroupIsEdit: false,
      addPageVisible: false,
      addPageIsEdit: false,
      groupformData: {},
      pageformData: {},
      beforeNode: null,
      firstLoad: true,
      copyPageFlag: false,
      showSearchInput: false,
      firstSelected: true
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
    operateNode () {
      return this.$refs.tagTree.getNode(this.operateNodeId)
    }
  },
  watch: {
    tagKeyword () {
      if (this.tagKeyword === '') {
        this.refreshTree(1)
      } else {
        this.getTreeData()
      }
    }
  },
  async created () {
  },
  mounted () {
    // this.nodeClick({ id: this.userInfo.DEPT_ID })
    setTimeout(() => {
      this.firstLoad = false
    }, 200)
  },
  methods: {
    handleClose (winName, type) {
      this[winName] = false
      if (type === '1') {
        if (winName === 'addGroupVisible') {
          this.refreshTree(1)
        } else {
          this.refreshTree((this.addPageIsEdit || this.copyPageFlag) ? 2 : undefined)
        }
      } else {
        const node = this.$refs.tagTree.getCurrentNode()
        if (node) {
          this.operateNodeId = node.id
        }
      }
    },
    loadTagNode (node, resolve) {
      if (node.level === 0) {
        resolve([{ id: 'ROOT', label: '页面配置', TP: '0' }])
      } else {
        if (this.tagKeyword !== '') {
        } else {
          const parmas = {
            appId,
            bzCode,
            TYPE: node.level === 1 ? 1 : 2
          }
          if (node.level === 2) {
            parmas.GID = node.data.id
            parmas.PAGEID = 'ROOT'
          } else if (node.level > 2) {
            parmas.PAGEID = node.data.id
          }
          this.$request.post('/ysjc/zhzs/getPageGroupord', parmas).then(res => {
            const data = res.map((item) => {
              return {
                ...item,
                label: item.GNM || item.PAGENM,
                isLeaf: item.LEAF === 0,
                id: node.level === 1 ? item.GID : item.PAGEID,
                TP: node.level === 1 ? '1' : '2',
                FID: node.level === 1 ? 'ROOT' : (node.level === 2 ? item.GID : item.FPAGID)
              }
            })
            resolve(data)
            if (this.openPage && this.openPage.fList && this.firstSelected) {
              for (let i = 0; i < data.length; i++) {
                if (this.openPage.pageId === data[i].id) {
                  this.firstSelected = false
                  this.$nextTick(() => {
                    this.$refs.tagTree.setCurrentKey(this.openPage.pageId)
                    this.nodeClick(data[i], undefined)
                    this.$emit('setExpand', false)
                  })
                  break
                }
                if (this.openPage.fList.findIndex(c => c === data[i].id) !== -1) {
                  this.$nextTick(() => {
                    const node = this.$refs.tagTree.getNode(data[i].id)
                    if (node) {
                      node.loaded = false
                      node.expand()
                    }
                  })
                  break
                }
              }
            }
            setTimeout(() => {
              if (data.find(c => c.id === this.beforeNodeId)) {
                this.$refs.tagTree.setCurrentKey(this.beforeNodeId)
              }
              this.beforeNodeId = ''
            }, 200)
          })
        }
      }
    },
    async getTreeData (type) {
      const parmas = {
        appId,
        bzCode,
        NM: this.tagKeyword,
        TYPE: '1'
      }
      let data = await this.$request.post('/ysjc/zhzs/getPageGroupord', parmas)
      const tree = []
      data = data.map(item => {
        return {
          ...item,
          label: item.GNM || item.PAGENM,
          id: item.TYPE === '1' ? item.GID : item.PAGEID,
          text: item.GNM || item.PAGENM,
          TP: item.TYPE + '',
          FID: item.TYPE === '1' ? 'ROOT' : (item.FPAGID === 'ROOT' ? item.GID : item.FPAGID)
        }
      })
      data.forEach(item => {
        const parent = data.find(c => c.id === item.FID)
        if (parent) {
          if (!parent.children) {
            parent.children = []
          }
          parent.children.push(item)
        } else {
          tree.push(item)
        }
      })
      data.forEach(item => {
        item.isLeaf = !(item.children && item.children.length > 0)
      })
      this.treeData = tree
      if (type === 2 && data.find(c => c.id === this.beforeNodeId)) {
        this.$nextTick(() => {
          this.$refs.tagTree.setCurrentKey(this.beforeNodeId)
          this.beforeNodeId = ''
        })
      } else {
        this.beforeNodeId = ''
      }
    },
    async menuClick (menu, node) {
      // this.$emit('setChange', false)
      this.operateNodeId = node.id
      if (menu.title === '添加同级分组') {
        this.operateNodeId = node.FID
        this.addBq(false)
      } else if (menu.title === '添加同级页面') {
        this.operateNodeId = node.FID
        this.addGroup(false)
      } else if (menu.title === '添加下级页面') {
        this.addGroup(false)
      } else if (menu.title === '编辑') {
        if (node.TP === '1') {
          this.addBq(true, node)
        } else {
          this.addGroup(true, node)
        }
      } else if (menu.title === '复制') {
        this.copyTable(false, node)
      } else if (menu.title === '删除') {
        if (node.TS_UN !== this.userInfo.DEPT_ID) {
          this.$message.error('只能删除本单位创建的数据')
          return
        }
        if (node.TP === '1') {
          const data = await this.$request.post('/ysjc/zhzs/getGroupXjindex', {
            appId,
            bzCode,
            GID: node.id
          })
          if (data.count > 0) {
            this.$message.error('有下级数据不能删除')
            return
          }
        } else {
          const data = await this.$request.post('/ysjc/zhzs/getPageXjindex', {
            appId,
            bzCode,
            PAGEID: node.id
          })
          if (data.count > 0) {
            this.$message.error('有下级数据不能删除')
            return
          }
        }
        this.$confirm(
          "您确认要删除名称为      <font color='red'>" + node.label + '      </font>的数据吗?', '操作提醒',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          }
        )
          .then(async () => {
            if (node.TP === '1') {
              await this.$request.post('/ysjc/zhzs/deleteCxGroup', {
                appId,
                bzCode,
                GIDS: node.id
              })
            } else {
              await this.$request.post('/ysjc/zhzs/deleteCxPage', {
                appId,
                bzCode,
                PAGEIDS: node.id
              })
              if (this.rightNode && this.rightNode.id === node.id) {
                this.$root.$emit('loadPageConfigData', null)
                this.rightNode = null
              }
            }
            this.isRefresh = true
            this.$message.success('删除成功')
            this.refreshTree(2)
            this.selectNode = null
            this.operateNodeId = ''
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消'
            // })
          })
      } else if (menu.title === '发布') {
        if (node.TS_UN !== this.userInfo.DEPT_ID) {
          this.$message.error('只能发布本单位创建的数据')
          return
        }
        this.$confirm(
          "您确认要发布名称为      <font color='red'>" + node.label + '      </font>的数据吗?', '操作提醒',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          }
        )
          .then(async () => {
            if (node.TP === '1') {
              await this.$request.post('/ysjc/zhzs/setGroupIslock', {
                appId,
                bzCode,
                GIDS: node.id,
                PAGE_STATE: '1',
                FIELD: 'PAGE_STATE'
              })
            } else {
              await this.$request.post('/ysjc/zhzs/setPageIslock', {
                appId,
                bzCode,
                PAGEIDS: node.id,
                PAGE_STATE: '1',
                FIELD: 'PAGE_STATE'
              })
              if (this.rightNode && this.rightNode.id === node.id) {
                this.$root.$emit('loadPageConfigData', { ...this.rightNode, PAGE_STATE: '1' })
              }
            }
            this.$message.success('发布成功')
            this.refreshTree(2)
            this.selectNode = null
            this.operateNodeId = ''
            this.isRefresh = true
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消'
            // })
          })
      } else if (menu.title === '取消发布') {
        if (node.TS_UN !== this.userInfo.DEPT_ID) {
          this.$message.error('只能取消发布本部门创建的数据')
          return
        }
        this.$confirm(
          "您确认要取消发布名称为      <font color='red'>" + node.label + '      </font>的数据吗?', '操作提醒',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          }
        )
          .then(async () => {
            if (node.TP === '1') {
              await this.$request.post('/ysjc/zhzs/setGroupIslock', {
                appId,
                bzCode,
                GIDS: node.id,
                PAGE_STATE: '0',
                FIELD: 'PAGE_STATE'
              })
            } else {
              await this.$request.post('/ysjc/zhzs/setPageIslock', {
                appId,
                bzCode,
                PAGEIDS: node.id,
                PAGE_STATE: '0',
                FIELD: 'PAGE_STATE'
              })
              if (this.rightNode && this.rightNode.id === node.id) {
                this.$root.$emit('loadPageConfigData', { ...this.rightNode, PAGE_STATE: '0' })
              }
            }
            this.$message.success('取消发布成功')
            this.refreshTree(2)
            this.selectNode = null
            this.operateNodeId = ''
            this.isRefresh = true
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消'
            // })
          })
      }
    },
    async nodeClick (data, node) {
      // if (this.selectNode && data.id !== this.selectNode.id) {
      //   const beforeTreeNode = this.$refs.tagTree.getNode(this.selectNode.id)
      //   beforeTreeNode && (beforeTreeNode.isCurrent = false)
      // }
      this.selectNode = data
      this.operateNodeId = data.id
      if (data.id !== 'ROOT' && data.TP !== '1') {
        this.rightNode = { ...this.selectNode, isSet: false }
        this.$root.$emit('loadPageConfigData', this.rightNode)
      }
    },

    refreshTree (type) {
      if (type === 2) {
        this.beforeNodeId = this.operateNode.data.id
      }
      if (this.tagKeyword !== '') {
        this.getTreeData(type)
        this.operateNodeId = ''
        return
      }
      if (type === 1) {
        this.treeData = [{ id: 'ROOT', label: '页面配置', TP: '0' }]
        // const node = this.$refs.tagTree.getNode(this.userInfo.DEPT_ID)
        // if (node) {
        //   node.loaded = false
        //   node.expand()
        //   this.selectNode = null
        //   this.operateNodeId = ''
        // }
      } else if (type === 2) {
        const node = this.$refs.tagTree.getNode(this.operateNode.data.FID)
        if (node) {
          node.loaded = false
          node.expand()
        }
      } else if (this.operateNode) {
        const node = this.$refs.tagTree.getNode(this.operateNode.data.id)
        if (node) {
          node.loaded = false
          node.expand()
        }
      }
      this.operateNodeId = ''
    },
    async addBq (flag, data) {
      // if (!this.operateNode) {
      //   this.operateNodeId = 'ROOT'
      //   // return this.$message.error('请选择一个节点')
      // }
      this.operateNodeId = 'ROOT'
      if (!flag && this.operateNode.data.TP === '2') {
        this.$message.error('页面节点下不能新增')
        return
      }
      if (flag && data.TS_UN !== this.userInfo.DEPT_ID) {
        this.$message.error('只能修改本部门创建的节点')
        return
      }
      this.addGroupIsEdit = flag
      let addData = {}
      if (!flag) {
        // const ord = this.operateNode.data.LEAF + 1
        addData = {
          TS_UN: this.userInfo.DEPT_ID,
          SUBUN_SHOW: '1',
          PAGE_STATE: '0'
        }
        this.groupformData = addData
      } else {
        this.groupformData = data
      }
      this.copyPageFlag = false
      this.addGroupVisible = true
    },
    addGroup (flag, data) {
      if (!this.operateNode) {
        // this.operateNodeId = 'ROOT'
        return this.$message.error('请选择一个节点')
      }
      // if (!flag && this.operateNode.data.TP !== '2') {
      //   this.$message.error('页面节点下不能新增')
      //   return
      // }
      if (flag && data.TS_UN !== this.userInfo.DEPT_ID) {
        this.$message.error('只能修改本级创建的节点')
        return
      }
      this.addPageIsEdit = flag
      let addData = {}
      if (!flag) {
        addData = {
          TS_UN: this.userInfo.DEPT_ID,
          SUBUN_SHOW: '1',
          PAGE_STATE: '0'
        }
        if (this.operateNode.data.TP === '1') {
          addData.FPAGID = 'ROOT'
          addData.GID = this.operateNode.data.id
        } else {
          addData.FPAGID = this.operateNode.data.id
          addData.GID = this.operateNode.data.GID
        }
        this.pageformData = addData
      } else {
        this.pageformData = data
      }
      this.copyPageFlag = false
      this.addPageVisible = true
    },
    copyTable (flag, data) {
      const copyData = this.$utils.deepClone(data)
      copyData.PAGENM = copyData.PAGENM + '-复制'
      copyData.PAGEID = ''
      copyData.TS_UN = this.userInfo.DEPT_ID
      copyData.PAGE_STATE = '0'
      copyData.ORD = ''
      copyData.FZPAGID = data.id
      this.addPageIsEdit = false
      this.pageformData = copyData
      this.copyPageFlag = true
      this.addPageVisible = true
    },
    async editTag () {
      // let flag = true
      // if (this.indexChange) {
      //   try {
      //     flag = await this.$confirm('指标修改后未保存，是否继续操作', '提示', {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     })
      //   } catch (error) {
      //     flag = false
      //   }
      // }
      // if (!flag) {
      //   return
      // }
      // this.$emit('setChange', false)
      if (!this.operateNode) {
        return this.$message.error('请选择一个节点')
      }
      if (this.operateNode.data.id === 'ROOT') {
        return this.$message.error('根节点不能编辑')
      }
      if (this.operateNode.data.TS_UN !== this.userInfo.DEPT_ID) {
        return this.$message.error('只能编辑本部门新增的数据')
      }
      if (this.operateNode.data.TP === '1') {
        this.addBq(true, this.operateNode.data)
      } else {
        this.addGroup(true, this.operateNode.data)
      }
    },
    allowDrag (node) {
      return this.tagKeyword === '' && node.data.id !== 'ROOT'
    },
    allowDrop (draggingNode, dropNode, type) {
      // if (type === 'inner' && draggingNode.parent !== dropNode.parent) {
      //   this.$message.error('不能跨层级拖拽')
      //   return false
      // }
      return type !== 'inner' && draggingNode.parent === dropNode.parent
      // return !(type === 'inner' && dropNode.data.TP === '0')
    },
    async nodeDrop (draggingNode, dropNode, type, event) {
      const parent = this.$refs.tagTree.getNode(draggingNode.data.FID)
      const children = parent.childNodes
      const tp = children.find(c => c.data.TP === '1') ? 1 : 2
      const data = children.map((item, i) => { return item.data.id })
      await this.$request.post('/ysjc/zhzs/savePageGroupord', {
        appId,
        bzCode,
        GIDS: tp === 1 ? data.join(',') : '',
        PAGEIDS: tp === 2 ? data.join(',') : ''
      })
      this.$message.success('保存成功')
    },
    handleMouseenter (ref, e) {
      const popover = this.$refs[ref]
      const timer = setTimeout(() => {
        // 找到气泡元素
        const { popperElm } = popover
        let finalTop = e.clientY + 10
        if (finalTop + popperElm.clientHeight > window.innerHeight) {
        // 溢出底部屏幕
          finalTop = e.clientY - 10 - popperElm.clientHeight
        }
        popover.popperElm.style.top = finalTop + 'px'
        clearTimeout(timer)
      }, 50)
    },
    focusToSearchInput () {
      this.showSearchInput = true
      this.$nextTick(() => {
        this.$refs.searchInput.focus()
      })
    },
    blurSearchInput () {
      if (!this.tagKeyword) {
        this.showSearchInput = false
      }
    },
    clearSearchInput () {
      this.showSearchInput = false
      this.refreshTree(1)
    }

  }
}
</script>
<style lang="scss" scoped>
.tuli {
  ::v-deep i {
    font-size: 18px !important;
  }
}

.tuli_box {
  .list_h {
    font-size: 15px;
    color: rgb(146, 140, 140);
    height: 32px;
    line-height: 28px;
    letter-spacing: 0;

    &.two_h {
      border-top: 1px #ddd solid;
      padding-top: 4px;
    }
  }

  & ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-left: 2px;

    li {
      padding: 0;
      margin: 8px 0;
      list-style: none;
      display: flex;
      align-items: center;

      .svg_size {
        font-size: 17px;
        margin-left: 2px;
      }

      span.box {
        position: relative;
        width: 20px;

        &::before {
          position: absolute;
          z-index: 5;
          left: 4px;
          top: -6px;
          height: 12px;
          width: 12px;
          content: "";
        }
        &.box_black::before { background-color: #333; }
        &.box_green::before { background-color: #69d653; }
        &.box_red::before { background-color: #d95102; }
        &.box_pink::before { background-color: #f56c6c; }
        &.box_orange::before { background-color: #e6a23c; }
        &.box_blue::before { background-color: #409eff; }
      }
      & i { font-size: 18px; }

      & em {
        color: #999;
        padding-right: 5px;
      }
    }
  }
}

.flgl_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px !important;
  border-top: 1px solid #eaecee;
  height: auto !important;
}

.tj-num {
  cursor: pointer;
  // text-decoration: underline;
  font-size: 18px;
  color: #31a2ff;

  &.green_num {
    color: #43e388;
  }
}

.info_box_bottom {
  background: linear-gradient(0deg, #fff, #f2f9ff);
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 2px 5px;

  &.left_text {
    width: 200px;
    padding-left: 0;
    display: flex;
    align-items: center;

    em {
      font-style: normal;
    }
  }

  i {
    position: relative;
    font-style: normal;
    padding-right: 10px;
    // margin-right: 10px;
    // margin-left: 10px;
    &::before {
      position: absolute;
      right: 9px;
      top: 0;
      width: 1px;
      height: 100%;
      // background: linear-gradient(180deg, #fff, rgb(191, 188, 188), #fff);
      background: #ced0d3;
      content: "";
    }

    b {
      // background: #f5fbff;
      padding: 2px 5px;
      border-radius: 5px;
      color: #31a2ff;
      margin-right: 5px;
    }

    &:last-child {
      &::before {
        display: none;
      }
    }
  }

  span {
    // padding: 5px 10px 0 6px;
    line-height: 20px;
    font-size: 14px;

    &.date_info {
      display: flex;

      /* width: 50%; */
      flex-direction: column;
      align-content: space-between;
      align-items: center;
      flex: 1;
      justify-content: space-around;

      em {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        padding: 0;
      }

      &.biaotou {
        flex: 0 0 100px;
        padding-right: 12px;
        background: url("../images/jianl1.png") no-repeat right center;
        span { color: #a1a3a7; }
      }
    }
  }
}

::v-deep {
  .svg-icon-node {
    position: relative;
    top: -1px;
    left: -2px;
  }

  .more-menu-panel {
    // position: fixed;
    // z-index: 999;
    // background: white;
    // border: 1px solid #ebeef5;
    // border-radius: 6px;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    // padding: 4px 0;
    // max-height: 300px;
    // overflow: auto;

    .more-menu-operation {
      width: 138px;
      // margin: 0 4px;
      margin: 0;
      padding: 5px 8px;
      font-size: 14px;
      line-height: 22px;
      border-radius: 4px;
      color: #1f2329;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;

      i {
        font-size: 16px;
        margin-right: 8px;
      }

      &:hover {
        background: rgba($color: #1f2329, $alpha: 0.08);
      }
    }

    .more-split-line {
      display: block;
      width: 100%;
      height: 1px;
      margin: 4px 0;
      background: rgba(31, 35, 41, 0.15);
    }
  }

  // .hidden-menu {
  //   position: relative;
  // }

  .hidden-menu .el-popover {
    position: fixed !important;
    margin: 0 !important;
  }

  .hidden-menu .el-popover__reference {
    padding: 1px 5px !important;
    // background-color: #fff;
  }

  .menu-btn {
    position: absolute;
    right: 0;
    top: 0;
    // display: none;
    // padding-right: 5px;

    .c-grey {
      color: #ced0d4 !important;

      &:hover {
        color: #34363a !important;
      }
    }
  }

  .hidden-menu:hover {
    .menu-btn {
      display: inline-block;
    }
  }

  .bk-tree-wrapper.no_root {
    .el-tree.el-tree--highlight-current.has-line > .el-tree-node.is-expanded.is-focusable > .el-tree-node__content:first-child { display: none; }

    .el-tree.el-tree--highlight-current.has-line > .el-tree-node.is-expanded.is-focusable > .el-tree-node__children {
      padding-left: 0;
    }
  }

  .left_tree_top.el-header {
    padding: 6px !important;
    background: #fff;
    border-bottom: 1px solid #e2e5ee;

    &.b_t {
      border-top: 1px solid #e2e5ee;
      border-bottom: 0;
    }

    &.has_biaoti {
      position: relative;
      padding-left: 10px !important;

      &::after {
        position: absolute;
        z-index: 5;
        left: 0;
        top: 8px;
        height: 24px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        content: "";
        background-color: #1777f5;
      }
    }

    .flex_lr {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .biaot {
        padding-left: 4px;
        padding-right: 6px;
        position: relative;
        font-size: 15px;

        &::after {
          position: absolute;
          z-index: 5;
          left: -6px;
          top: 50%;
          height: 20px;
          margin-top: -10px;
          width: 4px;
          border-radius: 0 4px 4px 0;
          content: "";
          background-color: #1777f5;
        }
      }
      .left_div { flex: 1; }

      .right_div {
        padding-left: 6px;

        .el-button + .el-button {
          margin-left: 0;
        }

        .el-button--text {
          width: auto;
          height: 28px;
          padding: 0 4px;
          border-radius: 4px;
          color: #808489;

          & span {
            margin-left: -3px;
            vertical-align: middle;
          }

          & i {
            font-size: 16px;
            vertical-align: middle;
          }

          &:hover {
            color: #1777f5;
            background-color: #e4e6ec;
          }
        }
      }

      &.has_n_biaoti {
        border-bottom: 0;
      }
      .el-input__inner { padding: 0 8px; }

      .el-input--prefix .el-input__inner {
        padding-left: 20px;
      }

      .el-input__prefix .el-input__icon {
        width: 16px;
      }

      .el-input__suffix .el-input__icon {
        width: 16px;
      }
    }
  }

  .el-tree-node__content {
    position: relative;
  }

  .btn-oper .el-button {
    font-size: 16px;
  }

  .sort-icon-node {
    display: inline-block;
    // width: 20px;
    // height: 20px;
    position: relative;
    // top: 3px;
  }

  .content-node {
    top: 1px;
    left: -3px;
  }

  .vxe-body--column:not(.col--tree-node) {
    position: relative;
    z-index: 2;
    background: #fff;
  }

  .row--current .vxe-body--column {
    background: #e6f7ff !important;
  }
}

.menu-divider {
  margin: 0;
}

.drop-title {
  padding: 0 0 0 3px;
}

.el_dropdown {
  margin: 0;
  padding: 0;
  border: none;

  .el-divider {
    background-color: #e5e5e5;
  }

  .drop-title {
    padding-left: 8px;
    font-weight: bold;
  }
}

.left_tree_top.has_icon {
  border-bottom: 0;
  border-top: 1px #e1e5ee solid;
  padding-right: 0 !important;

  .has_icon {
    position: relative;
    padding-left: 8px;
    font-size: 15px;

    &::before {
      position: absolute;
      z-index: 3;
      content: "";
      top: -4px;
      left: -6px;
      width: 6px;
      height: 24px;

      /* background-color: #d1cdc2; */
      border-radius: 4px;
      background-image: linear-gradient(to top, #409eff, rgb(218 224 235 / 94%));
    }
  }
}

.new_table_css.vxe-table--render-default {
  ::v-deep .vxe-cell {
    padding-left: 2px;
    padding-right: 2px;
  }
}

.shuzi_div {
  .beizhu {
    position: absolute;
    left: 4px;
    width: auto;
    top: 0;
    z-index: 6;
    height: 20px;
    font-size: 13px;
    color: #999;
  }

  .right_btn {
    position: absolute;
    right: 0;
    width: auto;
    top: 2px;
    z-index: 6;
    height: 20px;
    font-size: 13px;
  }

  .flex_d_b {
    display: flex;
    justify-content: space-around;
    padding: 8px 6px 0;
  }

  .red_c {
    color: #f90;
  }

  .green_c {
    color: rgb(3, 230, 71);
  }
}

</style>
